<template>
    <app-layout>
        <view>
            <app-goods-banner
                :pic-list="goods.pic_url"
                :share="goods.share"
                :goods_id="goods.id"
                :video-url="goods.video_url"
            ></app-goods-banner>
        </view>
        <view class="goods-name">{{goods.name}}</view>
        <view class='price main-between'>
            <view class="dir-left-nowrap cross-bottom">
                <image src='./../image/detail-price.png'></image>
                <view class="cross-bottom">{{goods.min_currency}}</view>
                <view class="goods-currency" v-if="goods.max_currency > goods.min_currency">起</view>
                <view>+</view>
                <view style="font-size: 14px">￥</view>
                <view>{{goods.min_price}}</view>
                <view class="goods-currency" v-if="goods.max_price > goods.min_price">起</view>
            </view>
            <!-- <view class="share" @click="shareClick">
                <image src="/static/image/icon/icon-share.png"></image>
                <view>分享</view>
            </view> -->
        </view>
        <view>
            <app-share-qr-code v-model="shareShow" :url="shareUrl"></app-share-qr-code>
        </view>
        <view>
            <app-service
                    :list="goods.services"
            ></app-service>
        </view>
        <view class="attr">
            <app-attr :goods="goods"
                  :attrGroupList="goods.attr_group"
                  :show="attrShow"
                  :cartShow="false"
                  buyText="立即兑换"
                  :previewUrl="previewUrl"
                  :submitUrl="submitUrl"
                  @attrtap="onAttr"
            >
                <view slot="button">
                    <app-goods-attr :attr-groups="goods.attr_group" :selectAttr="selectAttr" :attr="goods.attr"></app-goods-attr>
                </view>
            </app-attr>
        </view>
        <view class="marketing" v-if="goods">
            <app-goods-marketing :limit="goods.goods_marketing.limit"
                 :shipping="goods.goods_marketing.shipping"
                 :pickup="goods.goods_marketing.pickup"
                 :card="goods.goods_marketing_award.card"
                 :integral="goods.goods_marketing_award.integral"
                                 :express="goods.express"
            ></app-goods-marketing>
        </view>
        <view class="detail">
            <image src="/static/image/icon/goods-detail.png"></image>
            <view>
                <app-rich-text
                    :content="goods.detail"
                ></app-rich-text>
            </view>
        </view>
        <view class="bottom"></view>
        <view>
            <app-jump-button>
            </app-jump-button>
        </view>
        <view :class="[`app-bottom dir-left-nowrap`, `${iphone_x? 'iphone_x':''}`]">
            <view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="back">
                <image src="/static/image/icon/index.png"></image>
                <view>首页</view>
            </view>
            <view class="dir-left-nowrap">
               <view v-if="goods.goods_stock == 0" class="dir-left-nowrap">
                   <view class="main-center cross-center button" style="background-color: #CDCDCD;color: #fff;">已售罄
                   </view>
               </view>
                <view v-else class="main-center cross-center button"
                      :class="theme + '-background'"
                      @click="clickAttr"
                >立即兑换
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import { mapState } from "vuex";
    import appGoodsBanner from "../../../components/page-component/goods/app-goods-banner.vue";
    import appService from "../../../components/page-component/goods/app-goods-service.vue";
    import appGoodsAttr from "../../../components/page-component/goods/app-goods-attr.vue";
    import appAttr from "../../../components/page-component/app-attr/app-attr.vue";
    import appGoodsMarketing from "../../../components/page-component/goods/app-goods-marketing.vue";
    import appRichText from "../../../components/basic-component/app-rich/parse.vue";
    import appComments from "../../../components/page-component/app-comments/app-comments.vue";
    import appRecommendedProduct from "../../../components/page-component/app-recommended-product/app-recommended-product.vue";
    import appJumpButton from "../../../components/basic-component/app-jump-button/app-jump-button.vue";
    import appShareQrCode from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';

    export default {
        name: "goods",
        components: {
            appGoodsBanner,
            appShareQrCode,
            appService,
            appGoodsAttr,
            appAttr,
            appGoodsMarketing,
            appRichText,
            appComments,
            appRecommendedProduct,
            appJumpButton,
        },
        data() {
            return {
                goods: null,
                selectAttr: null,
                recommend_list: null,
                shareShow: false,
                shareUrl: null,
                previewUrl: null,
                submitUrl: null,
                iphone_x: false,
                attrShow: 0
            };
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
                mall: state => state.mallConfig.mall
            }),
        },
        onLoad(options) {
            let that = this;
            that.loadData(options.goods_id);
            that.previewUrl = that.$api.step.order_preview;
            that.submitUrl = that.$api.step.order_submit;
            uni.getSystemInfo({
                success: function (res) {
                    if(res.model.indexOf('iPhone X') > -1 || res.model.indexOf('iPhone 11') > -1 || res.model.indexOf('iPhone11') > -1 || res.model.indexOf('iPhone12') > -1 || res.model.indexOf('Unknown Device') > -1) {
                        that.iphone_x = true;
                    }
                }
            })
        },

        onShareAppMessage: function() {
            return this.$shareAppMessage({
                title: this.goods.app_share_title ? this.goods.app_share_title: this.goods.name,
                imageUrl: this.goods.app_share_pic ? this.goods.app_share_pic: this.goods.cover_pic,
                path: "/plugins/step/goods/goods",
                params: {
                    goods_id: this.goods.id
                }
            });
        },
        methods: {
            loadData(id) {
                this.$showLoading();
                this.$request({
                    url: this.$api.step.goods_detail,
                    data: {
                        id: id
                    }
                }).then(response => {
                    this.$hideLoading();
                    if (response.code === 0) {
                        this.goods = response.data.list;
                        this.shareUrl = this.$api.step.goods_poster + '&goods_id=' + id;
                        this.goods.id = id;
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: response.msg,
                            showCancel: false
                        });
                    }
                }).catch(e => {
                    this.$hideLoading();
                });
            },
            onAttr(data) {
                this.selectAttr = data;
            },
            shareClick() {
                this.shareShow = true;
            },
            back() {
                uni.redirectTo({
                    url: '/pages/index/index'
                });
            },
            clickAttr() {
                this.attrShow = Math.random();
            }
        }
    }
</script>

<style scoped lang="scss">
    .goods-currency {
        font-size: #{22rpx};
        padding-bottom:#{2rpx};
    }

    .goods-currency+view {
        font-size: #{32rpx};
        padding: 0 #{5rpx};
    }

    .goods-name {
        padding: #{24rpx};
        background-color: #ffffff;
        color: $uni-important-color-black;
    }

    .attr {
        padding: #{24rpx} 0;
        background-color: #f7f7f7;
    }

    .recommend {
        .recommend-title {
            margin: #{40rpx} 0 #{32rpx} 0;
            font-size: $uni-font-size-weak-one;
            color: $uni-general-color-two;

            .border {
                border-top: #{1rpx} solid #bbbbbb;
                height: 0;
                width: #{40rpx};
                margin: 0 #{24rpx};
            }

            image {
                width: #{24rpx};
                height: #{24rpx};
                display: block;
                margin-right: #{12rpx};
            }
        }
    }

    .bottom {
        width: 100%;
        height: #{110rpx};
    }

    .app-bottom {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 999;
        width: 100%;
        height: #{110rpx};
        font-size: $uni-font-size-general-one;

        .little {
            width: #{110rpx};
            height: 100%;
            background-color: #ffffff;
            font-size: #{20rpx};
            color: $uni-general-color-two;

            &:first-child {
                border-right: #{1rpx} solid #e2e2e2;
            }

            image {
                width: #{40rpx};
                height: #{40rpx};
                display: block;
                margin-bottom: #{10rpx};
            }
        }

        .button {
            width: #{650rpx};
            height: #{110rpx};
        }

        .service {
            background-color: #446dfd;
            color: #ffffff;
        }

        .contact-tel {
            background-color: #f39800;
            color: #ffffff;
        }

        .contact {
            background-color: #4cbf2a;
            color: #ffffff;
        }
    }

    .app-bottom.iphone_x {
        background-color: #fff;
        height: #{160rpx};
        padding-bottom: #{50rpx};
    }

    .comments {
        margin-bottom: #{20rpx};
        background-color: #ffffff;
    }

    .detail {
        background-color: #ffffff;

        image {
            width: 100%;
            height: #{80rpx};
            display: block;
        }
    }

    .price {
        height: #{76rpx};
        font-size: #{40rpx};
        color: #ff4544;
        font-family: DIN;
        padding-left: #{24rpx};
        padding-bottom: #{24rpx};
        background-color: #fff;
        margin-bottom: #{20rpx};
        position: relative;
    }

    .price image {
        height: #{44rpx};
        width: #{44rpx};
        display: block;
        float: left;
        margin-right: #{16rpx};
    }

    .share {
        margin-right: #{20rpx};
        margin-top: #{-30rpx};
        font-size: $uni-font-size-weak-two;
        color: $uni-general-color-one;

        image {
            width: #{40rpx};
            height: #{40rpx};
            margin-bottom: #{10rpx};
        }
    }
</style>